<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>add-employee</title>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/jquery/jquery-1.8.3.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>

    <script>
        var department;
        var imagePath;
        //Demo
        layui.use('form', function () {
            var form = layui.form;
            //监听提交
            form.on('submit(formDemo)', function (data) {

                // layer.msg(JSON.stringify(data.field));
                $.ajax({
                    url: '/employee/addEmployee',
                    type: 'POST',
                    data: {
                        name: data.field.name,
                        departmentId: data.field.departmentId,
                        department: department,
                        imagePath: imagePath
                    },
                    success: function (data) {
                        if (data.success) {
                            layer.open({
                                title: '信息',
                                content: data.message,
                                yes: function (index, layero) {
                                    //do something
                                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                                    location.href = '/employee/list';
                                }
                            });
                        }
                    },
                    error: function (error) {

                    }
                });
                return false;
            });

            form.on('select(test)', function (data) {
                department = localStorage[data.value];
            });

        });

        layui.use('upload', function () {
            var upload = layui.upload;

            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                , url: '/employee/uploadEmployeeImg' //上传接口
                , accept: 'images'
                , done: function (res) {
                    //上传完毕回调
                    var imgSrc = res.attributes.document.uploadDir;
                    var imgPrefix = res.attributes.uploadImgPathPrefix;
                    imagePath = imgSrc;
                    $("#head").css("width", "100px");
                    $("#head").css("height", "100px");
                    $("#head").attr("src", imgPrefix + imgSrc);
                }
                , error: function () {
                    //请求异常回调
                }
            });
        });

        (function () {
            var option = {
                url: '/department/findAll',
                type: 'get',
                success: function (data) {
                    var list = data.content;
                    var departmentId;
                    var department;
                    var html = '';
                    for (var i = 0; i < list.length; i++) {
                        departmentId = list[i].departmentId;
                        department = list[i].department;
                        localStorage[departmentId] = department;

                        var node = '<option value="' + departmentId + '">' + department + '</option>';
                        html = html + node;
                    }
                    $('#departments').append(html);

                }
            };
            $.ajax(option);
        })();

    </script>
    <style type="text/css">

        .form {
            width: 500px;
        }
    </style>
</head>
<body>
<div class="body">
    <div class="form">
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名：</label>
                <div class="layui-input-block">
                    <input type="text" name="name" class="layui-input"
                           lay-verify="required" placeholder="请输入姓名" autocomplete="off"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">部门：</label>
                <div class="layui-input-block">
                    <select id="departments" name="departmentId" lay-verify="required" lay-filter="test">
                        <option value="">请选择一个部门</option>

                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">头像：</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="test1">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                </div>
                <img id="head" src="">
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>